<script lang="ts" setup>
// #region 引入包, 函数和组件
import { useMusicStore } from "@/store"
import Loading from "@/components/Loading.vue" // 加载中组件
import { computed, ref, watch, watchEffect } from "vue"
import Comment from "@/components/Comment.vue" // 评论组件
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
// #endregion

// #region // 变量
const showPlayer = ref(true) // 展示播放器图片还是歌词
const pop = ref<{ open: (type: "bottom") => void; close: () => void } | null>(
  null,
) // 歌曲列表弹窗实例
const currentLyricIndex = ref(0) // 当前歌词下标
const com = ref<InstanceType<typeof Comment> | null>(null)
// #endregion

// #region // 函数
// 播放或暂停
const playSong = () => {
  if (!music.song) return
  if (!music.song.data[0].url) return music.audio.pause()
  // console.log(music.playStatus)
  music.changeCanplay(true)
  if (music.playStatus) {
    music.audio.pause()
  } else {
    music.audio.play()
    // console.log('开始')
  }
}
// 进度条拖动中事件
const changeing = () => {
  music.changeCanplay(false)
}
// 进度条拖动结束事件
const change = (e: { detail: { value: number } }) => {
  console.log(e.detail.value)
  music.audio.currentTime = (music.duration / 100) * e.detail.value
  music.changeCanplay(true)
}
// 点击评论弹出评论弹出层
const onClickOpenCommentPop = () => {
  // 评论组件未加载成功
  if (!com.value) return
  // 调用接口获取当前歌曲的评论
  music.getSongComment()
  // 打开
  com.value.open()
}
// #endregion

// #region // 生命周期和vue函数
watchEffect(() => {
  uni.setNavigationBarTitle({
    title:
      music.songsList[music.currentIndex].name +
      " - " +
      music.songsList[music.currentIndex].ar.map((v) => v.name).join("/"),
  })
})
const time = computed(() => {
  if (!music.duration) return 0
  return (music.currentTime / music.duration) * 100
})
const lyric = computed(() => {
  // console.log(111, music.lyric)
  if (music.lyric === "") return ""
  let res = music.lyric
    .split("\n")
    .map((v) => {
      if (!v) return
      const [t, l] = v.split("]")
      const [m, s] = t.split(":")
      // console.log(l === '')
      return [Number(m.slice(1)) * 60 + Number(s), l ? l.trim() : l]
    })
    .filter((v) => v && v[1])
  if (!res.length) res = [[0, "暂无歌词"]]
  // console.log(res)
  return res
})
watch(
  () => music.currentTime,
  (n) => {
    if (!lyric.value) return
    const index = lyric.value.findIndex((v) => n <= Number(v![0]))
    currentLyricIndex.value = index === -1 ? lyric.value.length - 1 : index - 1
  },
)
if (!music.song && music.currentIndex + 1) music.getUrl()

// #endregion
</script>

<template>
  <view class="player">
    <!-- 背景图 -->
    <view class="bg" :style="{
      backgroundImage: `url(${music.songsList[music.currentIndex].al.picUrl
        })`,
    }"></view>
    <!-- 中间的图和歌词 -->
    <view class="middle" @click="showPlayer = !showPlayer">
      <view class="pic" v-show="showPlayer">
        <image class="quan" src="/src/static/player/quan.png" mode="aspectFill"></image>
        <image class="line" src="/src/static//player/line.png" mode="aspectFill"></image>
        <image
          :class="['nobg', { rotate: music.playStatus }]"
          :src="music.songsList[music.currentIndex].al.picUrl"
          mode="aspectFill"
        ></image>
      </view>
      <scroll-view
        v-show="!showPlayer"
        class="lyric" scroll-y
        :show-scrollbar="false"
        :scroll-top="currentLyricIndex * 30 - 210"
        :scroll-with-animation="true"
      >
        <view
          v-for="(item, index) in lyric" v-if="lyric"
          :key="index"
          :class="{ active: index === currentLyricIndex }"
        >
          {{ item?.[1] }}
        </view>
      </scroll-view>
    </view>
    <!-- 控件图标部分 -->
    <view class="controls">
      <!-- 喜欢评论 -->
      <view class="like">
        <view @click="onClickOpenCommentPop()">
          <uni-icons type="chat-filled" color="#ffffff" :size="30"></uni-icons>
        </view>
      </view>
      <!-- 进度条 -->
      <view class="pro">
        <!-- 当前时间 -->
        <view class="min">{{ music.formatTime(music.currentTime) }}</view>
        <!-- 条 -->
        <slider class="pros" :value="time" ref="slider" activeColor="#f3f3f3" backgroundColor="#ccc" block-color="#fff"
          block-size="10" @change="change" @changing="changeing" />
        <!-- 总时间 -->
        <view class="max">{{ music.formatTime(music.duration) }}</view>
      </view>
      <!-- 控件 -->
      <view class="cont">
        <!-- 播放方式 -->
        <view class="playform" @click="music.changePlayform">
          <svg v-if="music.playform === 2" t="1750466438997" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="1011" width="32" height="32">
            <path d="M545.3 630.5c-11 0-20-9-20-20V405.9c0-11 9-20 20-20s20 9 20 20v204.6c0 11-9 20-20 20z" p-id="1012"
              fill="#ffffff"></path>
            <path
              d="M478.5 491.2c-5.1 0-10.2-2-14.1-5.9-7.8-7.8-7.8-20.5 0-28.3l67.1-67.1c7.8-7.8 20.5-7.8 28.3 0s7.8 20.5 0 28.3l-67.1 67.1c-4 4-9.1 5.9-14.2 5.9z"
              p-id="1013" fill="#ffffff"></path>
            <path
              d="M169.6 791c-5.7 0-11.4-2.4-15.3-7.1-27.4-32.6-48.8-69.2-63.5-109-15.3-41.1-23-84.4-23-128.7 0-49.9 9.8-98.3 29-143.8 18.6-44 45.2-83.5 79.2-117.4 33.9-33.9 73.4-60.6 117.4-79.2 45.6-19.3 93.9-29 143.8-29h274c11 0 20 9 20 20s-9 20-20 20h-274c-181.7 0-329.5 147.8-329.5 329.5 0 77.5 27.4 152.7 77.2 211.9 7.1 8.5 6 21.1-2.4 28.2-3.8 3-8.4 4.6-12.9 4.6z"
              p-id="1014" fill="#ffffff"></path>
            <path
              d="M712.7 215.5c-5.1 0-10.2-2-14.1-5.9l-67.1-67.1c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l67.1 67.1c7.8 7.8 7.8 20.5 0 28.3-4 3.9-9.1 5.9-14.2 5.9z"
              p-id="1015" fill="#ffffff"></path>
            <path
              d="M586.9 847.3h-274c-11 0-20-9-20-20s9-20 20-20h274c181.7 0 329.5-147.8 329.5-329.5 0-77.5-27.4-152.7-77.2-211.9-7.1-8.5-6-21.1 2.4-28.2 8.5-7.1 21.1-6 28.2 2.4 27.4 32.6 48.8 69.2 63.5 109 15.3 41.1 23 84.4 23 128.7 0 49.9-9.8 98.3-29 143.8-18.6 44-45.2 83.5-79.2 117.4s-73.4 60.6-117.4 79.2c-45.6 19.3-94 29.1-143.8 29.1z"
              p-id="1016" fill="#ffffff"></path>
            <path
              d="M378.4 915.6c-5.1 0-10.2-2-14.1-5.9l-67.1-67.1c-7.8-7.8-7.8-20.5 0-28.3 7.8-7.8 20.5-7.8 28.3 0l67.1 67.1c7.8 7.8 7.8 20.5 0 28.3-3.9 4-9.1 5.9-14.2 5.9z"
              p-id="1017" fill="#ffffff"></path>
          </svg>
          <svg v-else-if="!music.playform" t="1750466454960" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="1238" width="32" height="32">
            <path d="M941 414.6H83c-11 0-20-9-20-20s9-20 20-20h858c11 0 20 9 20 20s-8.9 20-20 20z" p-id="1239"
              fill="#ffffff"></path>
            <path
              d="M937.2 405.4c-5.1 0-10.2-2-14.1-5.9L780.7 257.1c-7.8-7.8-7.8-20.5 0-28.3 7.8-7.8 20.5-7.8 28.3 0l142.4 142.4c7.8 7.8 7.8 20.5 0 28.3-4 3.9-9.1 5.9-14.2 5.9zM941 649.4H83c-11 0-20-9-20-20s9-20 20-20h858c11 0 20 9 20 20s-8.9 20-20 20z"
              p-id="1240" fill="#ffffff"></path>
            <path
              d="M794.8 801c-5.1 0-10.2-2-14.1-5.9-7.8-7.8-7.8-20.5 0-28.3L923 624.5c7.8-7.8 20.5-7.8 28.3 0s7.8 20.5 0 28.3L808.9 795.1c-3.9 3.9-9 5.9-14.1 5.9z"
              p-id="1241" fill="#ffffff"></path>
          </svg>
          <svg v-else t="1750466464892" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="1458" width="32" height="32">
            <path
              d="M756.8 701.4c-28.6 0-56.1-3.7-82.8-10.9-46.7-12.8-90.8-37.1-131.3-72.5C500 580.7 460 529.8 424 466.9c-57.2-100-131-165.8-219.2-195.7-65.9-22.2-115.7-15.1-116.2-15-10.9 1.7-21.1-5.7-22.8-16.7-1.7-10.9 5.8-21.2 16.7-22.9 2.3-0.4 58.3-8.7 132.9 15.9 43.4 14.4 84.4 37 121.8 67.4 46.4 37.6 87.3 87 121.7 147 118.9 207.5 268.8 262.2 471.6 172.2 10.1-4.5 21.9 0.1 26.4 10.2s-0.1 21.9-10.2 26.4c-68.8 30.5-131.6 45.7-189.9 45.7z"
              p-id="1459" fill="#ffffff"></path>
            <path
              d="M785 809c-5.1 0-10.2-2-14.1-5.9-7.8-7.8-7.8-20.5 0-28.3l153.5-153.5c7.8-7.8 20.5-7.8 28.3 0s7.8 20.5 0 28.3L799.2 803.2c-3.9 3.9-9.1 5.8-14.2 5.8zM575.4 425.2c-6 0-12-2.7-15.9-7.9-6.7-8.8-5-21.3 3.8-28 106.7-81.3 232.1-88.2 383.4-21 10.1 4.5 14.6 16.3 10.2 26.4-4.5 10.1-16.3 14.6-26.4 10.2-138.6-61.5-247.6-56.4-342.9 16.3-3.7 2.7-8 4-12.2 4zM110.1 809c-16.8 0-26.9-1.5-27.7-1.7-10.9-1.7-18.4-12-16.7-22.9 1.7-10.9 11.9-18.3 22.8-16.7 0.8 0.1 38.3 5.4 90.8-7.6 70.6-17.5 133.5-58.1 187.1-120.5 7.2-8.4 19.8-9.4 28.2-2.2 8.4 7.2 9.4 19.8 2.2 28.2-32.7 38.2-69.4 69.4-109.1 92.8-31.9 18.8-65.9 32.7-100.8 41.1-31.5 7.6-58.3 9.5-76.8 9.5z"
              p-id="1460" fill="#ffffff"></path>
            <path
              d="M938.5 408.5c-5.1 0-10.2-2-14.1-5.9L770.9 249.1c-7.8-7.8-7.8-20.5 0-28.3 7.8-7.8 20.5-7.8 28.3 0l153.5 153.5c7.8 7.8 7.8 20.5 0 28.3-3.9 3.9-9.1 5.9-14.2 5.9z"
              p-id="1461" fill="#ffffff"></path>
          </svg>
        </view>
        <!-- 上一曲 -->
        <view @click="music.switchSong(-1)" class="prev">
          <svg t="1750465946389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1733" width="32" height="32">
            <path
              d="M746.666667 68.266667L213.333333 401.066667c-85.333333 51.2-85.333333 170.666667 0 221.866666l533.333334 332.8c85.333333 51.2 192-12.8 192-110.933333V179.2c0-98.133333-106.666667-157.866667-192-110.933333zM853.333333 844.8c0 34.133333-34.133333 55.466667-64 38.4L256 550.4c-29.866667-17.066667-29.866667-55.466667 0-72.533333l533.333333-332.8c29.866667-17.066667 64 0 64 34.133333v665.6z"
              fill="#ffffff" p-id="1734"></path>
            <path
              d="M128 128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667v768c0 25.6 17.066667 42.666667 42.666666 42.666667s42.666667-17.066667 42.666667-42.666667V128z"
              fill="#ffffff" p-id="1735"></path>
          </svg>
        </view>
        <!-- 播放暂停 -->
        <view class="btn" @click="playSong">
          <view class="bafang" v-if="!music.playStatus">
            <svg t="1750384805430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6313">
              <path
                d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z m64 0A448 448 0 1 0 512 64 448 448 0 0 0 64 512z m317.6448 198.587733a44.049067 44.049067 0 0 1-23.534933-39.355733V352.768a43.9808 43.9808 0 0 1 23.534933-39.355733 46.984533 46.984533 0 0 1 46.984533 0.1536L710.621867 472.746667a44.663467 44.663467 0 0 1 0 78.404266l-281.975467 159.232a47.0528 47.0528 0 0 1-46.984533 0.1536z"
                fill="#c84341" p-id="6314"></path>
            </svg>
          </view>
          <view class="zanting" v-else>
            <svg t="1750465535689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4036" width="32" height="32">
              <path
                d="M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"
                fill="#ffffff" p-id="4037"></path>
              <path
                d="M395.63317 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252zM634.098772 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252z"
                fill="#ffffff" p-id="4038"></path>
            </svg>
          </view>
        </view>
        <!-- 下一曲 -->
        <view @click="music.switchSong(1)" class="next">
          <svg t="1750465990949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1952" width="32" height="32">
            <path
              d="M768 401.066667L234.666667 68.266667C149.333333 21.333333 42.666667 81.066667 42.666667 179.2v665.6c0 98.133333 106.666667 162.133333 192 110.933333L768 622.933333c85.333333-51.2 85.333333-170.666667 0-221.866666z m-42.666667 149.333333L192 883.2c-29.866667 12.8-64-4.266667-64-38.4V179.2c0-34.133333 34.133333-51.2 64-38.4L725.333333 473.6c29.866667 17.066667 29.866667 59.733333 0 76.8z"
              fill="#ffffff" p-id="1953"></path>
            <path
              d="M853.333333 128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v768c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667V128z"
              fill="#ffffff" p-id="1954"></path>
          </svg>
        </view>
        <!-- 歌曲列表 -->
        <view class="list" @click="pop?.open('bottom')">
          <uni-icons type="list" color="#f4f4f4" size="50rpx"></uni-icons>
        </view>
      </view>
    </view>

    <Comment ref="com" :id="123" :list="music.comment"></Comment>

    <!-- 歌曲列表弹窗 -->
    <uni-popup ref="pop" type="bottom">
      <scroll-view scroll-y class="songlist">
        <uni-section title="播放列表" type="line"></uni-section>
        <view
          :class="['list_item', { active: music.songsList[music.currentIndex].id === item.id }]"
          v-for="(item, index) in music.songsList"
          @click="music.changeSongsList(item)"
          :key="item.id"
        >
          <view class="no">
            <image :src="item.al.picUrl"></image>
          </view>
          <view class="item_name">{{ item.name }}</view>
          <view class="cha" @click.stop="music.removeSong(item)">
            <uni-icons type="closeempty" color="#999"></uni-icons>
          </view>
          <view class="btn" @click="playSong">
            <view class="zanting" v-if="music.songsList[music.currentIndex].id === item.id && music.playStatus">
              <svg t="1750465535689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4036" width="32" height="32">
                <path
                  d="M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"
                  fill="#ffffff" p-id="4037"></path>
                <path
                  d="M395.63317 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252zM634.098772 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252z"
                  fill="#ffffff" p-id="4038"></path>
              </svg>
            </view>
            <view class="bafang" v-else>
              <svg t="1750384805430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6313">
                <path
                  d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z m64 0A448 448 0 1 0 512 64 448 448 0 0 0 64 512z m317.6448 198.587733a44.049067 44.049067 0 0 1-23.534933-39.355733V352.768a43.9808 43.9808 0 0 1 23.534933-39.355733 46.984533 46.984533 0 0 1 46.984533 0.1536L710.621867 472.746667a44.663467 44.663467 0 0 1 0 78.404266l-281.975467 159.232a47.0528 47.0528 0 0 1-46.984533 0.1536z"
                  fill="#c84341" p-id="6314"></path>
              </svg>
            </view>

          </view>
          <view class="item_ar">{{
            item.ar.map((v) => v.name).join("/")
          }}</view>
        </view>
      </scroll-view>
    </uni-popup>

    <!-- 加载中组件 -->
    <Loading></Loading>
  </view>
</template>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.player {
  width: 100%;
  height: calc(100vh - 44px);
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 32rpx;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transform: scale(2);
    filter: blur(30rpx) brightness(0.8);
    background: grey no-repeat center center / cover;
    z-index: -1;
  }
  .middle {
    width: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
  }
  .pic {
    width: 100%;
    height: 740rpx;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    .nobg {
      width: 360rpx;
      height: 360rpx;
      border-radius: 50%;
      position: absolute;
      bottom: 120rpx;
      &.rotate {
        animation: rotate 30s linear infinite;
      }
    }
    .quan {
      width: 600rpx;
      height: 600rpx;
      padding-top: 140rpx;
    }
    .line {
      position: absolute;
      width: 200rpx;
      height: 324rpx;
      transform: rotate(-20deg);
      left: 50%;
      top: -37rpx;
      margin-left: 20rpx;
    }
  }
  .lyric {
    width: 100%;
    flex: 1;
    color: rgba($color: #fff, $alpha: 0.4);
    padding: 40rpx;
    box-sizing: border-box;
    text-align: center;
    line-height: 60rpx;
    view {
      width: 100%;
      transition: all 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .active {
      color: #fff;
      font-size: 38rpx;
      white-space: wrap;
      overflow: auto;
    }
  }
}

.controls {
  height: 300rpx;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: center;
  .like {
    height: 80rpx;
  }
  .pro {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #ccc;
    .pros {
      flex: 1;
    }
  }
  .cont {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    justify-content: space-between;
    padding: 0 40rpx;
    box-sizing: border-box;
    .playform {
      svg {
        width: 50rpx;
        height: 50rpx;
        path {
          fill: #f4f4f4;
        }
      }
    }
    .btn {
      background: none;
      svg {
        width: 100rpx;
        height: 100rpx;
        path {
          fill: #fff;
        }
      }
    }
    .prev,
    .next {
      svg {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}

.songlist {
  background: #fff;
  height: 60vh;
  :deep(.line) {
    background: $uni-bg-color-wyyRed;
  }
  .uni-section {
    border-bottom: 2rpx solid #f4f4f4;
  }
}

.list_item {
  display: grid;
  padding: 24rpx;
  padding-left: 30rpx;
  grid-template-columns: 100rpx auto 72rpx 72rpx;
  grid-template-rows: 38rpx 32rpx;
  grid-row-gap: 6rpx;
  border-bottom: 2rpx solid #f1f1f1;
  box-sizing: border-box;
  .no {
    grid-row: span 2;
    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 6rpx;
    }
  }
  .item_name,
  .item_ar {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item_name {
    font-size: $uni-font-size-base;
    color: #3b4144;
  }
  .btn {
    background: none;
    grid-row: span 2;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    view {
      width: 50rpx;
      height: 50rpx;
      margin: auto;
    }
    svg {
      width: 50rpx;
      height: 50rpx;
      path {
        fill: #666;
      }
    }
  }
  .item_ar {
    font-size: $uni-font-size-sm;
    color: #999;
  }
  .cha {
    width: 80rpx;
    height: 80rpx;
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.active {
    view {
      color: #c84341 !important;
    }
    .btn svg path {
      fill: #c84341;
    }
    .no image {
      outline: 2rpx solid #c84341;
    }
  }
}
</style>
